<template>
    <toast></toast>

    <router-view @need-login="showLoginDialog"></router-view>

    <login v-show="showLogin" @close-login="closeLoginDialog" transition="fade" transition-mode="out-in"></login>

    <div v-if="isTab" class="ui-page-holder"></div>

    <footer v-if="isTab" class="ui-v-a ui-tri">

        <template v-for="(key,val) of tab">
            <a class="{{$route.name == key?'check':''}} ui-tab"
               v-link="{name:key,params:{id:'570f9ebc51c37c8804f9ff86'},replace: true}">
                <span class="fic {{$route.name == key?'check':''}} fic-{{val.img?val.img:key}}"></span>
                <p>{{val.title}}</p>
            </a>
        </template>
    </footer>
</template>
<script>
    import toast from './toast.vue'
    import {registerRoot} from '../libs/utils'
    export default{
        components: {
            login: function (resolve) {
                require.ensure(['./login.vue'], function (require) {
                    var component = require('./login.vue');
                    resolve(component);
                }, 'login')
            },
            toast: toast
        },
        computed: {
            isTab: function () {
                return this.tab[this.$route.name] != null;
            }
        },
        data(){
            return {
                background_color: '#f0f0f0',
                tab: {
                    home: {
                        title: '首页'
                    },
                    cate: {
                        title: '分类'
                    },
                    mine: {
                        title: '我的',
                        img: 'me'
                    },
                },
                showLogin: false
            }
        },
        ready: function () {
            var self = this;
            registerRoot(self);
            this.$on('toast', function (content) {
                self.$broadcast('toast', content);
            });
        },

        methods: {
            closeLoginDialog: function () {
                this.showLogin = false;
            },
            showLoginDialog: function () {
                this.showLogin = true;

                this.$route.router.go();
            }
        }
    }
</script>

<style scoped>


</style>